<template>
  <div class="concern-right">
    <!-- 用户卡片 -->
    <div class="user-card">
      <div class="top">
        <div class="headshot">
          <img src="./img/1.jpg" alt="用户头像" />
          <a href="javascript:;"></a>
        </div>
        <div class="desc">
          <div class="name">啦啦啦就哦</div>
        </div>
      </div>
      <div class="btm">
        <ul>
          <li>
            <div class="num">0</div>
            <div>动态</div>
          </li>
          <li class="line"></li>
          <li>
            <div class="num">3</div>
            <div>关注</div>
          </li>
          <li class="line"></li>
          <li>
            <div class="num">1</div>
            <div>粉丝</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 明星用户推荐 -->
    <div class="star-rec">
        <div class="title">
            <i>明星用户</i>
            <span>换一批</span>
        </div>
        <ul class="content">
            <li v-for="i,index in 3" :key="index">
                <div class="img">
                    <img src="./img/2.jpg">
                </div>
                <div class="info">
                    <p title="孙楠">孙楠<img title="孙楠" src="./img/3.png"></p>
                    <p title="歌手孙楠代表作《你快回来》《燃烧》" class="text-ellipsis">歌手孙楠&nbsp;&nbsp;代表作《你快回来》《燃烧》</p>
                </div>
                <div class="btn">关注</div>
                <div class="del"></div>
            </li>
        </ul>
        <!-- 分享微博 -->
        <div class="share">
            <p>添加微博好友，和他们分享音乐</p>
            <div class="share-btn">
                <i class="icon"></i>
                绑定新浪微博
            </div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "concern-right",
};
</script>

<style lang="scss" scoped>
.concern-right {
  .user-card {
    width: 100%;
    height: 185px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #d3d3d3;
    .top {
      display: flex;
      padding-top: 20px;
      .headshot {
        width: 103px;
        height: 103px;
        padding: 20px;
        box-sizing: border-box;
        position: relative;
        margin-left: 20px;
        img {
          width: 68px;
          height: 68px;
        }
        a {
          position: absolute;
          top: 17px;
          left: 17px;
          width: 68px;
          height: 68px;
          padding: 2px;
          border: 1px solid #dadada;
        }
      }
      .desc {
        width: 149px;
        margin-top: 20px;
        margin-left: 20px;
        .name {
          color: #000;
          font-weight: bold;
          font-size: 14px;
          line-height: 20px;
          margin-bottom: 5px;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
    .btm {
      margin: 10px 10px 10px 20px;
      ul {
        color: #666;
        font-size: 12px;
        .line {
          // 宽度为 1px的背景，渲染不成功，总会有一个比较粗
          // width: 1px;
          height: 40px;
          // background-color: #ccc;
          border-left: 1px solid #e4e4e4;
        }
        li {
          float: left;
          margin: 0 15px;
          div {
            line-height: 20px;
            text-align: center;
          }
          .num {
            font-size: 18px;
          }
        }
      }
    }
  }
  .star-rec{
      width: 100%;
      padding: 20px;
      box-sizing: border-box;
      font-size: 12px;
      color: #333;
      background-color: #fbfbfb;
      .title{
          line-height: 16px;
          height: 20px;
          border-bottom: 1px solid #dcdcdc;
          i{
              float: left;
              font-weight: bold;
          }
          span{
              float: right;
              color: #666;
              cursor: pointer;
              &:hover{
                  text-decoration: underline;
              }
          }
      }
      .content{
          li{
              display: flex;
              margin-top: 15px;
              .img{
                  width: 45px;
                  height: 45px;
                  cursor: pointer;
                  img{
                      width: 100%;
                      height: 100%;
                  }
              }
              .info{
                  width: 120px;
                  margin-left: 10px;
                  cursor: pointer;
                  &:hover{
                      text-decoration: underline;
                  }
                  img{
                      width: 15px;
                      height: 15px;
                      vertical-align: text-top;
                      margin-left: 5px;
                  }
                  p{
                      line-height: 22px;
                  }
                  p:nth-child(2){
                      color: #9b9b9b;
                  }
              }
              .btn{
                  cursor: pointer;
                  margin-top: 10px;
                  width: 35px;
                  height: 24px;
                  line-height: 23px;
                  padding-left: 19px;
                  color: #515151;
                  margin-left: 20px;
                  background: url('@/assets/button.png') no-repeat;
                  background-position: 0 -95px;
                  &:hover{
                      background-position: -94px -38px;
                  }
              }
              .del{
                  display: none;
                  width: 14px;
                  height: 14px;
                  background: url('@/assets/icon.png') no-repeat;
                  background-position: 3px -636px;
                  margin-top: 15px;
                  cursor: pointer;
                  &:hover{
                      background-position: -11px -636px;
                  }
              }
              &:hover .del{
                  display: block;
              }
          }
      }
      .share{
          margin-top: 30px;
          p{
              line-height: 20px;
              margin-bottom: 10px;
          }
          .share-btn{
              width: 100%;
              height: 31px;
              line-height: 31px;
              border: 1px solid #ccc;
              border-radius: 3px;
              text-align: center;
              cursor: pointer;
              background: linear-gradient(#fff 20%,#eee 90%, #ddd);
              box-shadow: 0 0 3px rgba(0,0,0,.1);
              &:hover{
                  background: linear-gradient(#fff 70%,#eee);
              }
              i{
                  display: inline-block;
                  width: 20px;
                  height: 20px;
                  vertical-align: middle;
                  background: url('@/assets/logo.png') no-repeat;
                  background-position: -172px 0;
              }
          }
      }
  }
}
</style>